@media screen and (min-width: 1024px) {
  .evo {
    width: 100%;
    height: 100%;
    .content {
      width: 965px;
      height: 100%;
      margin: 0 auto;
      margin-top: 55px;
      // padding-left: 165px;
      position: relative;
      .left {
        // float: left;
        // width: 500px;
        height: 100%;
        width: 255px;
        // display: inline-block;
        position: absolute;
        left: 0;

        top: 0px;
        // float: left;
        margin-right: 90px;
        // border: 1px solid #ccc;
        padding-top: 30px;
        .name {
          width: 100%;
          font-size: 36px;
          font-family: HutRounded-Bold;
          font-weight: 400;
          color: rgba(22, 37, 63, 1);
          .pay {
            font-size: 37px;
          }
        }
        .business {
          width: 100%;
          margin-top: 20px;
          span {
            font-size: 16px;
            font-family: PingFang-SC-Heavy;
            font-weight: 800;
            color: rgba(39, 66, 99, 1);
            margin-right: 27px;
          }
        }
        .take {
          width: 100%;
          margin-top: 64px;
          width: 106px;
          height: 28px;
          background: rgba(90, 114, 249, 1);
          border-radius: 14px;
          // height:12px;
          font-size: 14px;
          font-family: PingFang-SC-Heavy;
          font-weight: 800;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          line-height: 28px;
        }
        .img {
          width: 255px;
          margin-top: 50px;
          img {
            width: 255px;
            display: block;
          }
        }
      }
    }
    .rightimg {
      // float: right;
      // float: left;
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0px;
      width: 616px;
      height: 100%;
      img {
        display: block;
        width: 616px;
        // height: 549px;
      }
    }
  }
}

@media screen and (min-width: 1360px) {
  .evo {
    width: 100%;
    height: 100%;
    .content {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      margin-top: 105px;
      // padding-left: 165px;
      position: relative;
      .left {
        // float: left;
        // width: 500px;
        height: 100%;
        width: 300px;
        // display: inline-block;
        position: absolute;
        left: 0;

        top: 0px;
        // float: left;
        margin-right: 90px;
        // border: 1px solid #ccc;
        padding-top: 30px;
        .name {
          width: 100%;
          font-size: 37px;
          font-family: FranklinGothic-Demi;
          font-weight: 400;
          color: rgba(22, 37, 63, 1);
          .pay {
            font-size: 37px;
          }
        }
        .business {
          width: 100%;
          margin-top: 20px;
          span {
            font-size: 17px;
            font-family: PingFang-SC-Heavy;
            font-weight: 800;
            color: rgba(39, 66, 99, 1);
            margin-right: 27px;
          }
        }
        .take {
          width: 100%;
          margin-top: 64px;
          width: 121px;
          height: 32px;
          background: rgba(90, 114, 249, 1);
          border-radius: 16px;
          // height:12px;
          font-size: 12px;
          font-family: PingFang-SC-Heavy;
          font-weight: 800;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          line-height: 32px;
        }
        .img {
          width: 300px;
          margin-top: 60px;
          img {
            width: 300px;
            display: block;
          }
        }
      }
    }
    .rightimg {
      // float: right;
      // float: left;
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0px;
      width: 712px;
      height: 100%;
      img {
        display: block;
        width: 710px;
        // height: 549px;
      }
    }
  }
}
@media screen and (min-width: 1440px) {
  .evo {
    width: 100%;
    height: 100%;
    .content {
      width: 1320px;
      height: 100%;
      margin: 0 auto;
      margin-top: 105px;
      // padding-left: 165px;
      position: relative;
      .left {
        // float: left;
        // width: 500px;
        height: 100%;
        width: 340px;
        // display: inline-block;
        position: absolute;
        left: 0;

        top: 0px;
        // float: left;
        margin-right: 120px;
        // border: 1px solid #ccc;
        padding-top: 30px;
        .name {
          width: 100%;
          font-size: 48px;
          font-family: HutRounded-Bold;
          font-weight: 400;
          color: rgba(22, 37, 63, 1);
          .pay {
            font-size: 37px;
          }
        }
        .business {
          width: 100%;
          margin-top: 20px;
          span {
            font-size: 18px;
            font-family: PingFang-SC-Heavy;
            font-weight: 800;
            color: rgba(39, 66, 99, 1);
            margin-right: 27px;
          }
        }
        .take {
          width: 100%;
          margin-top: 84px;
          width: 141px;
          height: 37px;
          background: rgba(90, 114, 249, 1);
          border-radius: 19px;
          // height:12px;
          font-size: 14px;
          font-family: PingFang-SC-Heavy;
          font-weight: 800;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          line-height: 37px;
        }
        .img {
          width: 340px;
          margin-top: 80px;
          img {
            width: 340px;
            display: block;
          }
        }
      }
    }
    .rightimg {
      // float: right;
      // float: left;
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0px;
      width: 858px;
      height: 100%;
      img {
        display: block;
        width: 858px;
        // height: 549px;
      }
    }
  }
}
.ani {
  animation: change 0.5s ease-in;
}
@keyframes change {
  0% {
    margin-top: 100px;
    opacity: 1;
  }
  100% {
    margin-top: 0px;
    opacity: 1;
  }
}
.anib {
  animation: change2 0.6s ease;
}
@keyframes change2 {
  0% {
    margin-top: 100px;
    opacity: 0;
  }
  50% {
    margin-top: 50px;
    opacity: 0.8;
  }
  100% {
    margin-top: 20px;
    opacity: 1;
  }
}
@keyframes change3 {
  0% {
    margin-top: 140px;
    opacity: 0;
  }
  25% {
    margin-top: 126px;
    opacity: 0.3;
  }
  50% {
    margin-top: 112px;
    opacity: 0.6;
  }
  75% {
    margin-top: 98px;
    opacity: 1;
  }
  100% {
    margin-top: 84px;
    opacity: 1;
  }
}
.anitake {
  animation: change3 0.7s ease;
  cursor: pointer;
}
@keyframes change4 {
  0% {
    margin-top: 100px;
    opacity: 0;
  }
  100% {
    margin-top: 80px;
    opacity: 1;
  }
}
.aniimg {
  animation: change4 0.8s ease;
}
